<template>
  <div>
    <div class="tableHeard">
      <el-table :data="tableData" height="450" border style="width: 100%">
        <el-table-column align="center" type="index" label="#" width="180">
        </el-table-column>
        <el-table-column align="center" label="类别管理">
          <template slot-scope="scope">
            <el-input
              v-if="scope.$index == 0"
              v-model="input"
              @keyup.enter.native="addClassifly"
              placeholder="请输入添加内容"
            ></el-input>
            <div :class="{ div: scope.row.id == isActiveId }" v-else>
              <el-button
                class="btn"
                type="primary"
                @dblclick.native="updateClassifly(scope.row)"
                icon="el-icon-edit"
              >
                {{ scope.row.name }}
              </el-button>
              <el-input
                v-focus
                v-model="iptValue"
                @blur="enddateblur(scope.row)"
                @keyup.enter.native="enddateblur(scope.row)"
                class="ipt"
              ></el-input>
            </div>
          </template>
        </el-table-column>

        <el-table-column align="center" width="180" label="操作">
          <template slot-scope="scope">
            <div v-if="!scope.$index">
              <el-button
                type="success"
                style="margin-left: 35px"
                @click="addClassifly"
                >添加</el-button
              >
            </div>
            <div v-else>
              <el-button type="warning" @click="updateClassifly(scope.row)"
                >修改</el-button
              >
              <el-button type="danger" @click="deletClassifly(scope.row.id)"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      input: "",
      iptValue: "", //修改展示的值
      isActiveId: "", //判断是否显示input的id
    };
  },
  mounted() {
    this.getList();
  },
  //获取焦点
  directives: {
    focus: {
      update: function (el) {
        el.children[0].focus();
      },
    },
  },
  methods: {
    ...mapActions("msbd/classifly", [
      "getList",
      "addList",
      "deletList",
      "updateList",
    ]),
    //新增
    addClassifly() {
      if (this.input.trim() == "") {
        this.$message({
          message: "不能添加空数据!!!",
          type: "warning",
        });
      } else {
        this.addList(this.input.trim());
        this.input = "";
        this.$message({
          message: "新增成功",
          type: "success",
        });
      }
    },
    //删除
    deletClassifly(id) {
      this.$confirm("此操作将永久删除该信息, 确定删除吗?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
      })
        .then(() => {
          this.deletList(id);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //修改 && 双击
    updateClassifly(val) {
      this.isActiveId = val.id;
      this.iptValue = val.name;
    },
    // 失去焦点
    enddateblur(row) {
      if (this.iptValue == row.name) {
        this.isActiveId = "";
        this.$message({
          message: "值未发生改变昂",
          type: "warning",
        });
      } else {
        this.updateList({ id: this.isActiveId, val: this.iptValue });
        this.isActiveId = "";
        this.$message({
          message: "修改成功",
          type: "success",
        });
      }
    },
  },
  computed: {
    ...mapState("msbd/classifly", ["tableData"]),
  },
};
</script>

<style scoped>
.tableHeard {
  padding: 25px;
}

.div .ipt {
  display: block;
}
.div .btn {
  display: none;
}
.ipt {
  display: none;
}
</style>